<template>
  <div class="accompanied-bygoods">
    <div class="title" >
      <div class="accompanied-bygoods-title-slotbaseInfo">
        <slot
          name="baseInfo"
          :baseInfo="baseInfo" />
      </div>
      <div class="ops">
        <el-button @click="showListMethod">删除</el-button>
        <el-button
          type="primary"
          @click="printOrder">确认收货</el-button>
      </div>
    </div>
    <div class="list">
      <el-editable
        class="record-card-list"
        height="200"
        :columns="cardColumns"
        :data="cardData">
        <template
          slot="default-placeholder"
          slot-scope="scope">
          <el-editable
            class="record-card-son-list"
            :data="scope.row[[rowTitle]]"
            height="200"
            :columns="cardSonColumns"
          />
        </template>
      </el-editable>
    </div>
  </div>
</template>

<script>
import RecordInfo from '@/moduleComponents/common/detail/recordInfo'
import ElEditable from '@components/el-editable'
import { cloneDeep } from 'lodash'
export default {
  name: 'RecordZoomCard',
  components: { ElEditable, RecordInfo },
  data () {
    return {
    }
  },
  created () {
    console.log(1)
  },
  props: {
    // 列表表头
    cardColumns: {
      type: Array,
      default: () => []
    },
    // 子列表表头
    cardSonColumns: {
      type: Array,
      default: () => []
    },
    // 请求的数据,用于渲染表格数据
    cardData: {
      type: Array,
      default: () => []
    },
    curListInfo: {
      type: Object,
      default: () => {}
    },
    // 定义子列表数据的变量名称,根据这个变量找到cardData中的子列表数据
    rowTitle: {
      type: String,
      default: ''
    },
    baseInfo: {
      type: Object,
      default: () => {}
    },
    dialogTitleInfo: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
    this.reInitColumns()
  },
  methods: {
    // 如果没有子数据则不显示更多的按钮
    reInitColumns () {},
    // 确认发货
    printOrder () {
      this.$emit('slotboxconfirmshipment')
    },
    // 删除
    showListMethod () {
      this.$emit('slotboxdeletes')
    }
  }
}
</script>
<style lang="less">
.accompanied-bygoods {
  .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #b4b7bd;
    background: #eceef3;
    margin-top: 10px;

    &:hover {
      cursor: pointer;
    }

    .accompanied-bygoods-title-slotbaseInfo {
      > span {
        margin-right: 10px;
      }
      .solt-baseInfo-color {
        color: #06f;
        font-weight: 450;
        margin-left: 5px;
      }
    }
  }
  .el-dailog__body {
    padding: 10px 20px 30px 20px !important;
  }
  .purchasingdialog {
    .dialogtitle {
      text-align: center;
    }
    .downloadpictures {
      position: absolute;
      right: 0;
      top: 60px;
      width: 170px;
      display: inline-block;
    }
    div {
      span {
        margin-right: 25px;
      }
    }
  }
}
</style>
